
<style lang="scss" scoped>
@import '@/styles/pingtuan/order.scss';
</style>
<style lang="scss">

  .order {
    .theme-solid__btn{
      border-radius: 1rem;
      border-color: #FF0A14;
      color: #FF0A14;
      background: #fff;
    }
    .theme-hollow__btn{
      border-radius: 1rem;
      border-color: #333;
      color: #333;
      background: #fff;
    }
    .select_border__b{
      color: #FF0A14 !important;
      border-bottom: 2px solid #FF0A14;
    }
  }
</style>

<template>
  <div class="withdrawal order">
    <ComHeader title="我的拼团" leftArrow="true"/>
    <div class="container">
      <nav class="flex-display">
        <div
          class="flex-num-one"
          v-for="(item, index) in navList"
          :key="index"
          :class="{'select_border__b':item.select}"
          @click="fnSelectStatus(item)"
        >{{item.name}}</div>
      </nav>
      <scroll
        class="scroll"
        :data="drawalList"
        :pullup="isPullup"
        @scrollToEnd="searchMore"
        v-if="drawalList && drawalList.length"
        ref="suggest"
      >
        <ul class="order-con">
          <li class="item" v-for="(item, index) in drawalList" :key="index">
            <Item :item="item" />
          </li>
        </ul>
      </scroll>
      <div
        class="notMore flex-display flex-display-column flex-center-align"
        v-if="isLoading && !drawalList.length"
      >
        <img src="/static/pingtuan/order/shopping_img_em@2x.png">
        <span>订单空空如也！！</span>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import axios from "axios";
import { Toast, MessageBox, Indicator } from "mint-ui";
import Item from "./components/Item";
import { myPtStart, myPtStartDetail } from "@/api/pingtuan"
export default {
  data() {
    return {
      isHasMore: true, // 是否需要上拉加载
      drawalList: [], // 列表数据
      isPullup: true, // 是否需要监听下拉加载
      status: "all", // 订单状态
      isNext: "", // 是否有下一页
      isLoading: false,
      navList: [
        { name: "全部", select: true, status: "all" },
        { name: "拼团中", select: false, status: 1 },
        { name: "拼团成功", select: false, status: 2 },
        { name: "拼团失败", select: false, status: 3 },
      ]
    };
  },
  created() {
    this.initNav(this.$route.query.status?this.$route.query.status:this.status);
    this.userInfo = this.getlocalStorage(this.companyUnique);
    // 获取订单列表的状态
    this.status = this.$route.query.status?this.$route.query.status:this.status;
    // 获取数据
    // this.getOrderList();
    this.getPtOrderList();
  },
  methods: {
    /**
     * @desc 初始化导航
     * @param {String} _status  订单类型
     */
    initNav(_status) {
      this.navList.forEach(item => {
        item.select = item.status == _status ? true : false;
      });
    },
    fnSelectStatus(_item) {
      this.navList.forEach(item => {
        item.select = false;
      });
      _item.select = true;
      this.drawalList = [];
      this.status = _item.status;
      this.isNext = "";

      this.getPtOrderList();
    },
    // 新的订单列表
    getPtOrderList() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });

      myPtStart({
        status: this.status,
        uid: this.getUserInfo().id
      }, this.isNext ? this.isNext : "").then(res=>{
        Indicator.close();
        this.isLoading = true;
        this.isNext = res.next;
        if (res.data && res.data.length) {
          let _list = [];
          res.data.forEach(item => {
            _list.push(item);
          });
          this.drawalList = [...this.drawalList, ..._list];
        }
        this.print(this.drawalList);
      })
      .catch(err=>{
        Indicator.close();
      })
    },

    /**
     * @desc 是否需要下拉加载
     */
    searchMore() {
      if (this.isNext) {
        // this.getOrderList();
        this.getPtOrderList();
        return;
      }
      Toast({
        message: "我是有底线的",
        position: "middle",
        duration: 2000
      });
    }
  },
  components: {
    Scroll,
    ComHeader,
    Loading,
    Toast,
    MessageBox,
    Indicator,
    Item
  }
};
</script>
